<div class="content-wrapper">
    <script type="text/ng-template" id="fullTable.html">
        <div class="modal-body fullTable-popup">
            <div class="table-modal-container">
                <div class="table-header-modal">
                <table class="table table-striped table-bordered">
                    <thead>    
                        <tr>
                            <th rowspan="3"><div id="table-no">No</div></th>
                            <th rowspan="3"><div id="table-tanggal">Tanggal</div></th>
                            <th rowspan="3"><div id="table-feeder">Area</div></th>
                            <th rowspan="3"><div id="table-feeder">Rayon</div></th>
                            <th rowspan="3"><div id="table-feeder">Feeder</div></th>
                            <th rowspan="3"><div id="table-namagardu">Nama Gardu</div></th>
                            <th rowspan="3"><div id="table-merktrafo">Merk Trafo</div></th>
                            <th rowspan="3"><div id="table-lokasi">Lokasi</div></th>
                            <th colspan="2">Data Trafo</th>
                            <th rowspan="3"><div id="table-jurusan">Jurusan</div></th>
                            <th colspan="7">Data Pengukuran</th>
                            <th rowspan="3"><div id="table-totalkVA">Beban Total (kVA)</div></th>
                            <th rowspan="3"><div id="table-totalpercent">Beban Total (%)</div></th>
                            <th rowspan="3"><div id="table-fasapercent">Beban Fasa Tertinggi (%)</div></th>
                            <th rowspan="3"><div id="table-fasakVA">Beban Fasa Tertinggi (kVA)</div></th>
                            <th rowspan="2"><div id="table-kesetimbangan">Kesetimbangan (%)</div></th>
                            <th rowspan="3"><div id="table-inetral">Inetral (%)</div></th>
                            <th rowspan="3"><div id="table-ketidaksetimbangan">Ketidakseimbangan<br />dengan rumus<br />a-b-c (%)</div></th>
                        </tr>

                        <tr>
                            <th rowspan="2"><div id="table-kapasitas">Kapasitas (kVA)</div></th>
                            <th rowspan="2"><div id="table-arusnominal">Arus Nominal (A)</div></th>
                            <th colspan="4">Arus (A)</th>
                            <th colspan="3">Tegangan (V)</th>
                        </tr>
                        <tr>
                            <th><div id="table-arusR">R</div></th>
                            <th><div id="table-arusS">S</div></th>
                            <th><div id="table-arusT">T</div></th>
                            <th><div id="table-arusN">N</div></th>
                            <th><div id="table-teganganFN">F-N</div></th>
                            <th><div id="table-teganganFF">F-F</div></th>
                            <th><div id="table-teganganUjung">Ujung</div></th>
                            <th>Dengan Iavg</th>
                         </tr>
                    </thead>
                </table>
            </div>
            
            <div class="table-body-modal">
                <table class="table table-striped table-bordered">
                    <tbody>
                        <tr ng-repeat-start="value in streams" another-repeat-directive>
                            <td rowspan="3"><div id="table-no">@{{ $index + 1 }}</div></td>
                            <td rowspan="3"><div id="table-tanggal">@{{ makeTanggal(value.tanggal) }}</div></td>
                            <td rowspan="3"><div id="table-feeder">@{{ value.area }}</div></td>
                            <td rowspan="3"><div id="table-feeder">@{{ value.rayon }}</div></td>
                            <td rowspan="3"><div id="table-feeder">@{{ value.feeder }}</div></td>
                            <td rowspan="3"><div id="table-namagardu">@{{ value.nama_gardu }}</div></td>
                            <td rowspan="3"><div id="table-merktrafo">@{{ value.merk_trafo }}</div></td>
                            <td rowspan="3"><div id="table-lokasi">@{{ value.lokasi }}</div></td>
                            <td rowspan="3"><div id="table-kapasitas">@{{ value.datatrafo_kapasitas }}</div></td>
                            <td rowspan="3"><div id="table-arusnominal">@{{ value.datatrafo_arusnominal }}</div></td>
                            <td><div id="table-jurusan">Sumber</div></td>
                            <td><div id="table-arusR">@{{ value.datapengukuran_arus_R_sumber }}</div></td>
                            <td><div id="table-arusS">@{{ value.datapengukuran_arus_S_sumber }}</div></td>
                            <td><div id="table-arusT">@{{ value.datapengukuran_arus_T_sumber }}</div></td>
                            <td><div id="table-arusN">@{{ value.datapengukuran_arus_N_sumber }}</div></td>
                            <td><div id="table-teganganFN">@{{ value.datapengukuran_tegangan_FN }}</div></td>
                            <td><div id="table-teganganFF">@{{ value.datapengukuran_tegangan_FF }}</div></td>
                            <td><div id="table-teganganUjung"></div></td>
                            <td rowspan="3"><div id="table-totalkVA">@{{ value.beban_total_kVA }}</div></td>
                            <td rowspan="3"><div id="table-totalpercent">@{{ value.beban_total_percent }}</div></td>
                            <td rowspan="3"><div id="table-fasapercent">@{{ value.beban_fasa_tertinggi_percent }}</div></td>
                            <td rowspan="3"><div id="table-fasakVA">@{{ value.beban_fasa_tertinggi_kVA }}</div></td>
                            <td><div id="table-kesetimbangan">@{{ value.kesetimbangan }}</div></td>
                            <td><div id="table-inetral">@{{ value.inetral }}</div></td>
                            <td><div id="table-ketidaksetimbangan">@{{ value.ketidakseimbangan_sumber }}</div></td>
                        </tr>

                        <tr>
                            <td>Kiri</td>
                            <td>@{{ value.datapengukuran_arus_R_kiri }}</td>
                            <td>@{{ value.datapengukuran_arus_S_kiri }}</td>
                            <td>@{{ value.datapengukuran_arus_T_kiri }}</td>
                            <td>@{{ value.datapengukuran_arus_N_kiri }}</td>
                            <td></td>
                            <td></td>
                            <td>@{{ value.datapengukuran_tegangan_ujung_kiri }}</td>
                            <td><div id="table-kesetimbangan">@{{ value.kesetimbangan }}</div></td>
                            <td><div id="table-inetral">@{{ value.inetral }}</div></td>
                            <td><div id="table-ketidaksetimbangan">@{{ value.ketidakseimbangan_sumber }}</div></td>
                        </tr>

                        <tr ng-repeat-end>
                            <td>Kanan</td>
                            <td>@{{ value.datapengukuran_arus_R_kanan }}</td>
                            <td>@{{ value.datapengukuran_arus_S_kanan }}</td>
                            <td>@{{ value.datapengukuran_arus_T_kanan }}</td>
                            <td>@{{ value.datapengukuran_arus_N_kanan }}</td>
                            <td></td>
                            <td></td>
                            <td>@{{ value.datapengukuran_tegangan_ujung_kanan }}</td>
                            <td><div id="table-kesetimbangan">@{{ value.kesetimbangan_kanan }}</div></td>
                            <td><div id="table-inetral">@{{ value.inetral_kanan }}</div></td>
                            <td><div id="table-ketidaksetimbangan">@{{ value.ketidakseimbangan_kanan }}</div></td>
                        </tr>
                    </tbody>
                </table>
            </div>
            </div>
        </div>
    </script>
    <div class="content-title">
        <div class="content-title-left">
            <div ng-hide="nodata || loading || loadinglocations">    
                <!-- Single button -->
                <div class="btn-group button-filter-container" ng-init="location_area='Area'" dropdown>
                    <button type="button" class="btn dropdown-toggle button-filter" dropdown-toggle>
                        @{{ location_area }} <span class="caret"></span>
                    </button>
                    <ul class="dropdown-menu dropdown-menu-filter pull-right noselect" role="menu">
<!--                        <li ng-click="changeArea('Area')"><a>Area</a></li>-->
                        <li ng-repeat="value in menu_area"><a ng-click='changeArea(value)'>@{{ value }}</a></li>
                    </ul>
                </div>
                <!-- Single button -->
                <div class="btn-group button-filter-container" ng-init="location_rayon='Rayon'" ng-hide="location_area==='Area'" dropdown>
                    <button type="button" class="btn dropdown-toggle button-filter" dropdown-toggle>
                        @{{ location_rayon }} <span class="caret"></span>
                    </button>
                    <ul class="dropdown-menu dropdown-menu-filter pull-right noselect" role="menu">
<!--                        <li ng-click="changeRayon('Rayon')"><a>Rayon</a></li>-->
                        <li ng-repeat="value in menu_rayon"><a ng-click="changeRayon(value)">@{{ value }}</a></li>
                    </ul>
                </div>
                <!-- Single button -->
                <div class="btn-group button-filter-container" ng-init="location_penyulang='Penyulang'" ng-hide="location_area==='Area' || location_rayon==='Rayon'" dropdown>
                    <button type="button" class="btn dropdown-toggle button-filter" dropdown-toggle>
                        @{{ location_penyulang }} <span class="caret"></span>
                    </button>
                    <ul class="dropdown-menu dropdown-menu-filter pull-right noselect" role="menu">
<!--                        <li ng-click="changePenyulang('Penyulang')"><a>Penyulang</a></li>-->
                        <li ng-repeat="value in menu_penyulang"><a ng-click="changePenyulang(value)">@{{ value }}</a></li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="content-title-middle">
            <h2>Tabel Penyulang</h2>
        </div>
        <div class="content-title-right">
            <div class="pagination-container" ng-hide="nodata || loading || loadinglocations || nodatalocation">
                <pagination 
                    total-items     = "sortedGroupedDatashown.length" 
                    ng-model        = "bigCurrentPage" 
                    items-per-page  = "totalstreams" 
                    max-size        = "maxSize" 
                    class           = "pagination-sm" 
                    boundary-links  = "true" 
                    rotate          = "false"
                    num-pages       = "numPages"
                    previous-text   = "&lsaquo;"
                    next-text       = "&rsaquo;"
                    first-text      = "&laquo;"
                    last-text       = "&raquo;"
                >
                </pagination>
            </div>
            
            {{ Form::open(array('url' => 'export/apk2', 'method' => 'print-container', 'class' => 'print-container', 'ng-hide' => 'nodata || loading || loadinglocations || nodatalocation')) }}
                <input type="hidden" name="array" ng-value="tryingtoexport(sortedGroupedDatashown)">
                <input type="image" src="microsoft-excel-logo.png" width="30px" height="30px">
    
            {{ Form::close() }}
            
<!--
            <from action="export" method="post" class="print-container" ng-hide="nodata || loading || loadinglocations || nodatalocation">
                <input type="image" src="microsoft-excel-logo.png" width="30px" height="30px">
            </from>
-->
        </div>
    </div>
    <div class="content-page">
        <div class="innerpartysystem" ng-hide="nodata || nodatalocation || loading || loadinglocations">
            <div class="table-header">
                <table id="headertable" class="table table-striped table-bordered">
                    <thead>    
                        <tr>
                            <th rowspan="3"><div id="table-no">No</div></th>
                            <th rowspan="3"><div id="table-tanggal">Tanggal</div></th>
                            <th rowspan="3"><div id="table-feeder">Area</div></th>
                            <th rowspan="3"><div id="table-feeder">Rayon</div></th>
                            <th rowspan="3"><div id="table-feeder">Feeder</div></th>
                            <th rowspan="3"><div id="table-namagardu">Nama Gardu</div></th>
                            <th rowspan="3"><div id="table-merktrafo">Merk Trafo</div></th>
                            <th rowspan="3"><div id="table-lokasi">Lokasi</div></th>
                            <th colspan="2">Data Trafo</th>
                            <th rowspan="3"><div id="table-jurusan">Jurusan</div></th>
                            <th colspan="7">Data Pengukuran</th>
                            <th rowspan="3"><div id="table-totalkVA">Beban Total (kVA)</div></th>
                            <th rowspan="3"><div id="table-totalpercent">Beban Total (%)</div></th>
                            <th rowspan="3"><div id="table-fasapercent">Beban Fasa Tertinggi (%)</div></th>
                            <th rowspan="3"><div id="table-fasakVA">Beban Fasa Tertinggi (kVA)</div></th>
                            <th rowspan="2"><div id="table-kesetimbangan">Kesetimbangan (%)</div></th>
                            <th rowspan="3"><div id="table-inetral">Inetral (%)</div></th>
                            <th rowspan="3"><div id="table-ketidaksetimbangan">Ketidakseimbangan<br />dengan rumus<br />a-b-c (%)</div></th>
                        </tr>

                        <tr>
                            <th rowspan="2"><div id="table-kapasitas">Kapasitas (kVA)</div></th>
                            <th rowspan="2"><div id="table-arusnominal">Arus Nominal (A)</div></th>
                            <th colspan="4">Arus (A)</th>
                            <th colspan="3">Tegangan (V)</th>
                        </tr>
                        <tr>
                            <th><div id="table-arusR">R</div></th>
                            <th><div id="table-arusS">S</div></th>
                            <th><div id="table-arusT">T</div></th>
                            <th><div id="table-arusN">N</div></th>
                            <th><div id="table-teganganFN">F-N</div></th>
                            <th><div id="table-teganganFF">F-F</div></th>
                            <th><div id="table-teganganUjung">Ujung</div></th>
                            <th>Dengan Iavg</th>
                        </tr>
                    </thead>
                </table>
            </div>
            
            <div class="table-body">
                <table id="bodytable" class="table table-striped table-bordered">
                    <tbody>
                        <tr ng-repeat-start="value in streams" my-repeat-directive ng-click="openModal(value)">
                            <td rowspan="3"><div id="table-no">@{{ ((bigCurrentPage -1) * 10) + $index + 1 }}</div></td>
                            <td rowspan="3"><div id="table-tanggal">@{{ makeTanggal(value[0].tanggal) }}</div></td>
                            <td rowspan="3"><div id="table-feeder">@{{ value[0].area }}</div></td>
                            <td rowspan="3"><div id="table-feeder">@{{ value[0].rayon }}</div></td>
                            <td rowspan="3"><div id="table-feeder">@{{ value[0].feeder }}</div></td>
                            <td rowspan="3"><div id="table-namagardu">@{{ value[0].nama_gardu }}</div></td>
                            <td rowspan="3"><div id="table-merktrafo">@{{ value[0].merk_trafo }}</div></td>
                            <td rowspan="3"><div id="table-lokasi">@{{ value[0].lokasi }}</div></td>
                            <td rowspan="3"><div id="table-kapasitas">@{{ value[0].datatrafo_kapasitas }}</div></td>
                            <td rowspan="3"><div id="table-arusnominal">@{{ value[0].datatrafo_arusnominal }}</div></td>
                            <td><div id="table-jurusan">Sumber</div></td>
                            <td><div id="table-arusR">@{{ value[0].datapengukuran_arus_R_sumber }}</div></td>
                            <td><div id="table-arusS">@{{ value[0].datapengukuran_arus_S_sumber }}</div></td>
                            <td><div id="table-arusT">@{{ value[0].datapengukuran_arus_T_sumber }}</div></td>
                            <td><div id="table-arusN">@{{ value[0].datapengukuran_arus_N_sumber }}</div></td>
                            <td><div id="table-teganganFN">@{{ value[0].datapengukuran_tegangan_FN }}</div></td>
                            <td><div id="table-teganganFF">@{{ value[0].datapengukuran_tegangan_FF }}</div></td>
                            <td><div id="table-teganganUjung"></div></td>
                            <td rowspan="3"><div id="table-totalkVA">@{{ value[0].beban_total_kVA }}</div></td>
                            <td rowspan="3"><div id="table-totalpercent">@{{ value[0].beban_total_percent }}</div></td>
                            <td rowspan="3"><div id="table-fasapercent">@{{ value[0].beban_fasa_tertinggi_percent }}</div></td>
                            <td rowspan="3"><div id="table-fasakVA">@{{ value[0].beban_fasa_tertinggi_kVA }}</div></td>
                            <td><div id="table-kesetimbangan">@{{ value[0].kesetimbangan }}</div></td>
                            <td><div id="table-inetral">@{{ value[0].inetral }}</div></td>
                            <td><div id="table-ketidaksetimbangan">@{{ value[0].ketidakseimbangan_sumber }}</div></td>
                        </tr>

                        <tr ng-click="openModal(value)">
                            <td>Kiri</td>
                            <td>@{{ value[0].datapengukuran_arus_R_kiri }}</td>
                            <td>@{{ value[0].datapengukuran_arus_S_kiri }}</td>
                            <td>@{{ value[0].datapengukuran_arus_T_kiri }}</td>
                            <td>@{{ value[0].datapengukuran_arus_N_kiri }}</td>
                            <td></td>
                            <td></td>
                            <td>@{{ value[0].datapengukuran_tegangan_ujung_kiri }}</td>
                            <td><div id="table-kesetimbangan">@{{ value[0].kesetimbangan_kiri }}</div></td>
                            <td><div id="table-inetral">@{{ value[0].inetral_kiri }}</div></td>
                            <td><div id="table-ketidaksetimbangan">@{{ value[0].ketidakseimbangan_kiri }}</div></td>
                        </tr>

                        <tr ng-repeat-end ng-click="openModal(value)">
                            <td>Kanan</td>
                            <td>@{{ value[0].datapengukuran_arus_R_kanan }}</td>
                            <td>@{{ value[0].datapengukuran_arus_S_kanan }}</td>
                            <td>@{{ value[0].datapengukuran_arus_T_kanan }}</td>
                            <td>@{{ value[0].datapengukuran_arus_N_kanan }}</td>
                            <td></td>
                            <td></td>
                            <td>@{{ value[0].datapengukuran_tegangan_ujung_kanan }}</td>
                            <td><div id="table-kesetimbangan">@{{ value[0].kesetimbangan_kanan }}</div></td>
                            <td><div id="table-inetral">@{{ value[0].inetral_kanan }}</div></td>
                            <td><div id="table-ketidaksetimbangan">@{{ value[0].ketidakseimbangan_kanan }}</div></td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <div class="table-nodata-container" ng-show="nodata && !loading && !loadinglocations">
            <table id="nodatatable">
                <tr>
                    <td>
                        <span class="plnrbbdist-glyphicon glyphicon glyphicon-tasks" aria-hidden="true"></span><br />
                        <h5>Empty Data.<br />No data available.</h5>
                    </td>
                </tr>
                <tr></tr>
            </table>
        </div>
        <div class="table-nodata-container" ng-show="nodatalocation && !nodata && !loading && !loadinglocations">
            <table id="nodatatable">
                <tr>
                    <td>
                        <span class="plnrbbdist-glyphicon glyphicon glyphicon-tasks" aria-hidden="true"></span><br />
                        <h5>Empty Data.<br />No data available for this location.</h5>
                    </td>
                </tr>
                <tr></tr>
            </table>
        </div>
        <div class="table-loading-container" ng-show="loading || loadinglocations">
            <table id="nodatatable" class="sebenernyabuatloader">
                <tr>
                    <td>
                        <span class="glyphicon glyphicon-refresh gly-spin"></span>
                    </td>
                </tr>
            </table>
        </div>
    </div>
</div>